<template>
  <div class="userManage">
        <div class="formSearch">
          <el-form label-position="left"  :inline="true" :model="formSearch" class="demo-form-inline form1">
            <el-form-item label="姓名／账号">
              <el-input v-model="formSearch.name" placeholder="请输入姓名或账号"></el-input>
            </el-form-item>
            <el-form-item label="推荐码">
              <el-input v-model="formSearch.recommendCode" placeholder="请输入推荐码"></el-input>
            </el-form-item>
            <el-form-item label="用户类型">
              <el-select v-model="formSearch.isInside" placeholder="请选择用户类型">
                <el-option label="全部" value=""></el-option>
                <el-option label="理财师" value="1"></el-option>
                <el-option label="用户" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form label-position="left"  :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="在职状态">
              <el-select v-model="formSearch.isLeave" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="在职" value="0"></el-option>
                <el-option label="离职" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否绑卡">
              <el-select v-model="formSearch.tieCard" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="未绑卡" value="0"></el-option>
                <el-option label="已绑卡" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form  :inline="true"  class="demo-form-inline form3" label-position="left">
            <el-form-item label="注册时间" >
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="beginDate" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col :span="2" class="dateSpan">-</el-col>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="endDate" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item style="float: right;margin-right:0;">
              <el-button type="primary" @click="getData" class="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tableDataDiv">
            <el-table class="tableData" :data="tableData" >
              <el-table-column type="index" label="序号" width="70"></el-table-column>
              <el-table-column prop="realName"            label="姓名"      min-width="70"></el-table-column>
              <el-table-column prop="name"                label="账号"      min-width="100"></el-table-column>
              <el-table-column prop="channelName"         label="所属渠道"   min-width="100"></el-table-column>
              <el-table-column prop="orgDepName"          label="部门"      min-width="250"></el-table-column>
              <el-table-column prop="orgName"             label="职务"      width="100">
                <template scope="scope">
                  <span>{{ getOrgName(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="registCts"           label="注册时间"   width="150">
                <template scope="scope">
                  <span>{{ getRegisTime(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column  label="是否是IFA"  min-width="100">
                <template scope="scope">
                  <span>{{ getIsInside(scope.row.isInside) }}</span>
                </template>
              </el-table-column>
              <el-table-column class="activityOperation"  label="操作"       min-width="100" >
                <template scope="scope">
                  <userLook :id="scope.row.id" @update="updateList" style="display: inline-block" v-if="getButtonConfig&&getButtonConfig.check"></userLook>
                  <disRole :id="scope.row.id"  style="display: inline-block" v-if="getButtonConfig&&getButtonConfig.distribute"></disRole>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formSearch.curPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="formSearch.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize">
              </el-pagination>
            </div>
        </div>
  </div>
</template>
<script>
  import disRole from './DistributeRole.vue'
  import userLook from './UserLook.vue';
  import {jsUtils} from 'util/util.js';
  import {mapGetters} from 'vuex'
  import {postUserList} from 'api/common/index.js'
  
  export default {
    components: {userLook,disRole},
    data () {
      return {
        formSearch: {
          recommendCode:"",
          beginDate:'',
          endDate:'',
          tieCard:'',
          isLeave:'',
          isInside:'',
          name:'',
          actUserId: sessionStorage.getItem('HKid'),
          curPage: 1,
          pageSize: 10
        },
        beginDate:'',
        endDate:'',
        tableData: [],
        totalSize: 100,
        submPushButton:false,
        neefRefresh:false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '100px',
      }
    },
    created () {
     
      this.$emit('setTitleMsg', ['用户管理','用户列表'])
      this.getData();
      // this.getTotalSize();
      this.$store.commit('SET_ChgStatusActFormVisible', false);
      this.$store.commit('SET_PushFormVisible', false);
    },
    computed:{
      getButtonConfig(){
            // console.log(this.$store.getters.getButtonConfig('roleManage'));
            return this.$store.getters.getButtonConfig('userList')
      }
    },
    methods: {

      refreshData: function(){
          this.getData();
      },
      getRegisTime(row){
        //本地缓存用户信息
        // localStorage.setItem("USER_INFO_" + row.id, row);
        return jsUtils.getSmpFormatDate(row.registCts, true);
      },
      getIsInside(isInside){
        return isInside===1?"是":"否";
      },
      getOrgName(row){
          if(row.isInside == 0){
            return "";
          }else{
            return row.orgName;
          }
      },
      updateList(){
        this.getData();
      },
      async getData () {
        var pageSize =  this.formSearch.pageSize;
        this.getTotalSize();
        this.formSearch.pageSize = pageSize;
        var url = '/api-hks/v1/mgr/SysUserCtrl/getSysUserList';

        if(this.beginDate != ''){
          console.log("this.beginDate = " + this.beginDate);
          this.formSearch.beginDate = jsUtils.getFormatDate(this.beginDate);
        }

        if(this.endDate != ''){
          console.log("this.endDate = " + this.endDate);
          this.formSearch.endDate = jsUtils.getFormatDate(this.endDate);
        }
         
        try{
          let back = await postUserList(this.formSearch)
          back = back.data
          // console.log(back)
          if(back.resultCode ==='200'){
            this.tableData = back.result
          }
        }catch(err){
          console.error(err)
        }
      },
      async getTotalSize(){
        try{
          let back = await postUserList(this.formSearch, 999999)
          back = back.data
          // console.log(back)
          if(back.resultCode ==='1003'){
            this.totalSize = back.size
          }
        }catch(err){
          console.error(err)
        }
     
      },
      handleSizeChange (val) {
        this.formSearch.pageSize = val;
        console.log('pageSize = ' + this.formSearch.pageSize);
        this.getData();
      },
      handleCurrentChange (val) {
        this.formSearch.curPage = val;
        console.log('curpage = ' + this.formSearch.curPage);
        this.getData();
      }
    }
  }
</script>
<style lang="less">
@greenStyle:#63c5ce;
@orangeStyle:#f7931e;
  .userManage{
    .el-table-column {
      text-align: center;
    }
    .titleBox {
      height: 56px;
      border-bottom: 1px solid #ccc;
      text-align: left;
    }

    .formSearch{
      padding-top:1.875rem;
      text-align : left;
    }

    .dateSpan{
      text-align :center;
    }

        //顶部
    .formSearch{
      .el-input__inner{
        width: 10rem;
        height:2.25rem;
      }
      .el-radio__label{
        font-size:0.875rem;
      }
      .el-form-item{
        margin-right:8.8rem;
        margin-bottom:1rem;
      }
      .el-form-item__label{
        width: 6rem;
        font-size:0.875rem;
        font-weight:bold;
      }
      .form1{
        .el-form-item{
          margin-right:6.25rem;
        }
      }
      .dateSpan{
        width:1rem;
        text-align: center;
        text-indent: 0.3rem;
      }
      .search{
        width:10rem;
        height:2rem;
        background: @orangeStyle;
        border:1px solid @orangeStyle;
        font-size: 0.875rem;
        padding:0;
        &:active{
          background: #db7c1d;
        }
      }
    }
    //表格
    .tableDataDiv{
      .el-table th{
        background: #ebfcfc;
        .cell{
          font-size:0.875rem;
          text-align: left;
          background: #ebfcfc;
        }
      }
      .el-table__body-wrapper{
        overflow-y: hidden;
        tbody{
          .cell{
            font-size:0.875rem;
            text-align: left;
          }
          .el-button{
            span{
              color:@greenStyle;
            }
          }
        }
      }
    }
    //分页显示
    .block{
      float: right;
      margin-top:1rem;
    }
    .el-pager{
      .active{
        background: @greenStyle;
      }
    }
    //查看弹出框
    .checkUserDialog{
      .userInfoDialog{
        .el-dialog--small{
          width: 72rem;
          border-radius: 0.5rem;
          .el-dialog__header{
            background: #F6F6F6;
            font-size: 1rem;
            color:#222222;
            padding:0 1rem 0 1rem;
            height:3.125rem;
            line-height:3.125rem;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            .el-dialog__title{
              font-size:1rem;
              font-weight: normal;
            }
          }
        }
        .el-dialog__close{
          margin-top:1rem;
        }
      }
      .cancel{
        width:14rem;
        background: @greenStyle;
        margin-left:28rem;
        margin-top:1rem;
          span{
            color:white !important;
            font-size:1.1rem;
          }
      }
    }
    //分配角色弹出框
    .distributeRole{
      .el-checkbox{
        margin-left:15px;
        margin-bottom: 10px;
      }
      .dialog-footer{
        text-align: center;
        .el-button{
          width:12rem;
          margin:0 3rem;
        }
        .submit{
          background: @greenStyle;
          span{
            color:#ffffff !important;
          }
        }
        .cancel{
          span{
            color:#1f2d3d !important;
          }
          &:hover{
            border:1px solid @greenStyle;
            span{
              color:@greenStyle !important;
            }
          }
        }
      }
    }
  }
  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-size:0.875rem;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size:0.875rem;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size:0.875rem;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size:0.875rem;
  }
</style>
